<template>
  <div class="content-wrapper pl-60 pr-60">
    <el-tabs class="page-tab" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="tab.title" :name="tab.name"  v-for="(tab,index) in tabList" :key="index">
        <component :is="tab.comp"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import PageTab1 from './page1'
  import PageTab2 from './page2'
  import PageTab3 from './page3'
  import PageTab4 from './page4'
  import PageTab5 from './page5'
  import PageTab6 from './page6'
  export default {
    name: 'index',
    components: {
      PageTab1,
      PageTab2,
      PageTab3,
      PageTab4,
      PageTab5,
      PageTab6
    },
    data () {
      return {
        activeName: '1',
        tabList: [
          { title: '电信', name: '1', comp: 'PageTab1' },
          { title: '政务', name: '2', comp: 'PageTab2' },
          { title: '物联网', name: '3', comp: 'PageTab3' },
          { title: '企业', name: '4', comp: 'PageTab4' },
          { title: '金融', name: '5', comp: 'PageTab5' },
          { title: '旅游', name: '6', comp: 'PageTab6' }
        ]
      }
    },
    mounted () {
      let myTab = this.$route.query.myTab
      if (myTab) {
        this.activeName = myTab
      }
    },
    methods: {
      handleClick (tab, event) {
        this.$bus.emit('select-item', tab.name)
      }
    }
  }
</script>

<style scoped lang="scss">
  /deep/ .el-tabs__header{
    position: absolute;
    top:20px;
    right: 60px;
    z-index: 9999;
  }
  /deep/ .el-tabs__nav .el-tabs__item{
    color: rgba(255,255,255,.5)!important;
    font-size: 20px!important;
    &.is-active{
      color: $--color-primary!important;
    }
  }
</style>
